<template>
  <view class="playlist">
    <!-- 头部 -->
    <view class="playlist_header" @click.prevent="playAll">
      <view class="playlist_header_left">
        <text class="iconfont icon-yinlequan"></text>
        <text class="playauto">播放全部 ({{playlistDetail.trackCount}})</text>
      </view>
      <view class="playlist_header_right">
        <text class="iconfont icon-xiazai"></text>
        <text class="iconfont icon-bofangliebiao"></text>
      </view>
    </view>
    <!-- 歌曲列表 -->
    <view class="trackList">
      <track-list v-for="(item,index) in playlistAllData" :key="item.id" :track="item" :index="index"></track-list>
    </view>
  </view>
</template>

<script setup>
  import trackList from '../trackList/trackList.vue'
  import { storeToRefs } from 'pinia'
  import {
    useMusicStore
  } from '@/store/modules/musicStore.js'
  const musicStore = useMusicStore()
  const { playlistDetail,playlistAllData } = storeToRefs(musicStore)
  
  const playAll = () => {
    musicStore.musicInfo = playlistAllData.value[0]
    musicStore.getMusicPlayer(playlistAllData.value[0].id)
    musicStore.isPlay = true
  }
</script>

<style lang="scss" scoped>
  .playlist{
    .playlist_header{
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 20rpx;
      .playauto{
        font-size: 35rpx;
      }
      .iconfont{
        font-size: 50rpx;
        margin-right:20rpx;
      }
      .icon-yinlequan{
        background-color: red;
        color: #fff;
        border-radius: 90px;
      }
    }
    .trackList{
      padding-bottom: 100rpx;
    }
  }
</style>